<template>
  <div class="login-wrapper">
    <!-- <h2 class="login-title">Login</h2> -->
    <div class="input-group">
      <label>用户名</label>
      <input v-model.trim="username" placeholder="请输入账号" />
    </div>
    <div class="input-group">
      <label>密码</label>
      <input v-model.trim="password" type="password" placeholder="请输入密码" />
    </div>
    <div class="input-group">
      <label>Email</label>
      <input v-model.trim="Email" type="Email" placeholder="请输入 Email" />
    </div>
    <div class="input-group">
      <label>姓名</label>
      <input v-model.trim="name" placeholder="请输入姓名" />
    </div>
    <div class="input-group">
      <label>手机号</label>
      <input v-model.trim="number" type="number" placeholder="请输入手机号" />
    </div>
    <div>
      性别：
      <label for="genderNan">
        男<input id="genderNan" type="radio" name="gender" value="男">
      </label>
      <label>
        女<input type="radio" name="gender" value="女">
      </label>
    </div>
    <div>
      出生日期
      <input type="date" name="birth">
    </div>
    <div>
      验证码：
      <input class="abc" type="text" name="code" v-model="verificationCode">
      <img src="../1.jpg" alt="">
    </div>
    
    <button @click="login" class="login-btn">注册</button>
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    <p class="register-link">没有账号？<a href="#" @click.prevent="toggleForm">立即注册</a></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: '',
      Email: '',
      name: '',
      number: '',
      verificationCode: '',
      imgCodeUrl: '1.jpg' // 假设验证码图片的路径
    };
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === '123') {
        alert('注册成功！');
      } else {
        this.errorMessage = '注册失败，请检查账号密码。';
      }
    },
    toggleForm() {
      this.$emit('toggleForm');
    }
  }
};
</script>

<style scoped>
.login-wrapper {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #e8e2e2;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-weight: bold;
}

.login-btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 10px;
}

.register-link {
  text-align: center;
  margin-top: 20px;
}

.register-link a {
  color: #007bff;
}
</style>